<template>
	<view v-if="showTransition" :style="{ background: color }" class="card" :class="{ active: transitionCompleted }">
		智护康途
	</view>
	<view v-else class="pages" :style="{ background: color }">
	</view>
</template>

<script setup>
	import { getStatus } from '@/api/apis.js'
	import {
		ref,
		onMounted
	} from 'vue';

	const transitionCompleted = ref(false);
	const showTransition = ref(true);
	const color = 'linear-gradient(to top, #fff, #D8E699)';

	onMounted(() => {
		setTimeout(() => {
			transitionCompleted.value = true;
			setTimeout(async () => {
				showTransition.value = false;
				// uni.switchTab({
				// 	url:"/pages/index/index"
				// })
				await getStatus().then(res => {
					// console.log(res)
					if (res.data === 1) {
						uni.switchTab({
							url: "/pages/index/index"
						})
					}else {
						uni.redirectTo({
							url: "/pages/suspended/suspended"
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			}, 0); // 调整显示过渡页面的时间
		}, 2000); // 调整动画执行的时间
	});
</script>

<style scoped>
	.card {
		position: relative;
		width: 100%;
		height: 100vh;
		background: mediumturquoise;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25px;
		font-weight: bold;
		border-radius: 15px;
		cursor: pointer;
	}

	.card::before,
	.card::after {
		position: absolute;
		content: "";
		width: 20%;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25px;
		font-weight: bold;
		background-color: #fff;
		transition: all 2s;
	}

	.card::before {
		top: 0;
		right: 0;
		border-radius: 0 15px 0 100%;
	}

	.card::after {
		bottom: 0;
		left: 0;
		border-radius: 0 100% 0 15px;
	}

	.card::before,
	.card::after {
		width: 100%;
		height: 100%;
		border-radius: 15px;
		animation: expand 2s;
	}

	@keyframes expand {
		0% {
			width: 10%;
			height: 10%;
			border-radius: 15px;
		}

		100% {
			width: 100%;
			height: 100%;
			border-radius: 15px;
		}
	}

	.card:after {
		content: "欢迎进入";
	}
</style>